<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<HTML>
<HEAD>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="${pageContext.request.contextPath}/css/Style1.css"
	rel="stylesheet" type="text/css" />
<script language="javascript"
	src="${pageContext.request.contextPath}/js/public.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
</HEAD>
<body>
	<br>
	<form id="Form1" name="Form1"
		action="${pageContext.request.contextPath}/#" method="post">
		<table cellSpacing="1" cellPadding="0" width="100%" align="center"
			bgColor="#f5fafe" border="0">
			<TBODY>
				<tr>
					<td class="ta_01" align="center" bgColor="#afd1f3"><strong>订单列表</strong>
					</TD>
				</tr>

				<tr>
					<td class="ta_01" align="center" bgColor="#f5fafe">
						<table cellspacing="0" cellpadding="1" rules="all"
							bordercolor="gray" border="1" id="DataGrid1"
							style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: 100%; WORD-BREAK: break-all; BORDER-BOTTOM: gray 1px solid; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #f5fafe; WORD-WRAP: break-word">
							<tr
								style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; HEIGHT: 25px; BACKGROUND-COLOR: #afd1f3">

								<td align="center" width="5%">序号</td>
								<td align="center" width="20%">订单编号</td>
								<td align="center" width="5%">订单金额</td>
								<td align="center" width="5%">收货人</td>
								<td align="center" width="5%">订单状态</td>
								<td align="center" width="60%">订单详情</td>
							</tr>
							<c:forEach items="${orders }" var="o" varStatus="status">
								<tr onmouseover="this.style.backgroundColor = 'white'"
									onmouseout="this.style.backgroundColor = '#F5FAFE';">
									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
										width="5%">${status.count}</td>
									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
										width="20%">${o.oid}</td>
									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
										width="5%">${o.total }</td>
									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
										width="5%">${o.name }</td>
									<td style="CURSOR: hand; HEIGHT: 22px" align="center"
										width="5%"><c:if test="${o.state == 1 }">
										未付款
										</c:if> <c:if test="${o.state == 2 }">
										未发货
										</c:if> <c:if test="${o.state == 3 }">
										已发货
										</c:if> <c:if test="${o.state == 4 }">
										订单完成
										</c:if></td>
									<td align="center" style="HEIGHT: 22px" width="60%"><input
										type="button" value="订单详情" id="${o.oid }" class="desc" />
										<%-- <div id="div${o.oid}"></div> --%>
										<table border="1">
										</table>
									</td>

								</tr>
							</c:forEach>
						</table>
					</td>
				</tr>
				<tr align="center">
					<td colspan="7"></td>
				</tr>
			</TBODY>
		</table>
	</form>
</body>
<script type="text/javascript">
	$(function() {
		$(".desc").click(function() {
			var id = this.id;
			var url = "/Store/AdminOrderServlet";
			var obj = {
				"method" : "findOrderByid",
				"id" : id
			};
			
			var $tb = $(this).next();
			$tb.empty();
			$.post(url,obj,function(data,status){
			
				var th ="<tr><th width='5%'>商品图片</th><th width='20%'>商品名称</th><th width='5%'>数量</th><th width='5%'>单价</th><th width='65%'>详情</th></tr>";
				$tb.append(th);
				//将数据遍历
				$.each(data,function(i,obj){
					var tr="<tr><td width='5%'><img src='/Store/"+obj.product.pimage+"' width='50px' /></td><td width='20%'>"+obj.product.pname+"</td><td width='5%'>"+obj.quantity+"</td><td width='5%'>"+obj.product.shop_price+"</td><td width='65%'>"+obj.product.pdesc+"</td></tr>";
					$tb.append(tr);
				});
				
			},"json");
			$tb.toggle();
		});
		
	});
</script>
</HTML>

